<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
		html {
			color-scheme: light only;
		}

		body::before {
			--line: color-mix(in lch, canvasText 25%, transparent);
			--size: 40px;
			content: '';
			height: 100vh;
			width: 100vw;
			position: fixed;
			background: linear-gradient(
					90deg,
					var(--line) 1px,
					transparent 1px var(--size)
			)
			0 -5vmin / var(--size) var(--size),
			linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(
					--size
			) var(--size);
			mask: linear-gradient(-30deg, transparent 60%, white);
			top: 0;
			z-index: -1;
		}

		article {
			--border-width: 2px;
			--outer-radius: calc(var(--radius) * var(--unit));
			--outer-padding: calc(var(--padding) * var(--unit));
			--inner-radius: calc((var(--outer-radius) - var(--outer-padding)) - var(--border-width));
			background: canvas;
		}

		* {
			box-sizing: border-box;
		}

		body {
			display: grid;
			place-items: center;
			min-height: 100vh;
			background: hsl(0 0% 98%);
			font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
		}

		:is(article, article > div) {
			border: var(--border-width) solid hsl(0 0% 80%);
		}

		:root {
			--padding: 8;
			--radius: 28;
			--zoom: 1;
			--unit: 1px;
		}

		article {
			--rad: var(--outer-radius);
			border-radius: var(--outer-radius);
			padding: var(--outer-padding);
			aspect-ratio: 1;
			width: 85vmin;
			max-width: 800px;
			display: grid;
			place-items: center;
			position: relative;
			position: fixed;
			top: 50%;
			left: 50%;
			transform-origin: 0 0;
			scale: calc(1 + (var(--zoom, 0) * 3.5));
			--translation: calc(-50% + (var(--zoom, 0) * 25%));
			translate: var(--translation) var(--translation);
			transition: translate 0.2s, scale 0.2s;
		}

		:is(.padding, .outer, .inner) {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			font-weight: bold;
			font-size: 0.45rem;
			line-height: 1;
			display: inline-block;
		}

		.padding {
			color: hsl(0 0% 70%);
			left: calc(var(--outer-radius) + 0.5rem);
			top: calc(var(--outer-padding) * 0.5);
			translate: 0 -50%;
		}

		.inner {
			color: hsl(213, 89%, 51%);
			left: calc((var(--outer-padding) + (var(--inner-radius) * 0.5)));
			top: calc((var(--outer-padding) + (var(--inner-radius) * 0.5)));
			translate: 0 0%;
		}

		.outer {
			color: hsl(120, 100%, 41%);
			left: calc(var(--outer-radius) * 0.1);
			top: calc(var(--outer-radius) * 0.1);
			translate: -100% -100%;
		}

		article::after,
		article > div::after {
			content: "";
			position: absolute;
			inset: calc(var(--border-width) * -1);
			border-radius: var(--rad);
			border: var(--border-width) solid hsl(120, 100%, 41%);
			clip-path: polygon(0 0, var(--rad) 0, var(--rad) var(--rad), 0 var(--rad));
		}

		article > div {
			background: hsl(212, 100%, 92%);
			height: 100%;
			width: 100%;
			position: relative;
			border-radius: var(--inner-radius);
		}

		article > div::after {
			--rad: calc(var(--inner-radius));
			border-radius: var(--inner-radius);
			border-color: hsl(209, 100%, 50%);
		}
    </style>
</head>
<body>
<article>
	<span class="padding"></span>
	<span class="outer"></span>
	<span class="inner"></span>
	<div></div>
</article>

<script type="module">
	import { GUI } from "https://cdn.skypack.dev/pin/dat.gui@v0.7.9-2wtQAdFH5SRwnJLDWGNz/mode=imports/optimized/dat.gui.js";

	console.clear()

	const PADDING = document.querySelector('.padding')
	const OUTER = document.querySelector('.outer')
	const INNER = document.querySelector('.inner')

	const CONFIG = {
		padding: 8,
		radius: 28,
		zoom: true,
		unit: 'px',
	};

	const UPDATE = () => {
		Object.keys(CONFIG).forEach((key) => {
			if (key === 'zoom') {
				document.documentElement.style.setProperty('--zoom', CONFIG.zoom ? 1 : 0)
			} else if (key === 'unit') {
				document.documentElement.style.setProperty('--unit', `1${CONFIG.unit}`)
			} else {
				document.documentElement.style.setProperty(`--${key}`, CONFIG[key]);
			}
			PADDING.innerText = `${CONFIG.padding}${CONFIG.unit}`
			OUTER.innerText = `${CONFIG.radius}${CONFIG.unit}`
			INNER.innerText = `${CONFIG.radius - CONFIG.padding}${CONFIG.unit}`
		});
		// Object.keys(CONFIG).forEach(key =>
	};

	const CTRL = new GUI();
	CTRL.add(CONFIG, "radius", 0, 100, 1).name("Radius").onChange(UPDATE);
	CTRL.add(CONFIG, "padding", 0, 100, 1).name("Padding").onChange(UPDATE);
	CTRL.add(CONFIG, "zoom").name("Zoomed in").onChange(UPDATE);

	UPDATE()
</script>
</body>
</html>